@import "../../style/var";

.chatting-container {

  .chatting-header {
    @include flex(space-between);
    @include wh(100%, 0.5rem);
    background: #ebebeb;
    box-shadow: 0 1px 0.04rem 0.01rem rgba(0, 0, 0, 0.1);
    padding: 0 0.18rem;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999;
  }

  .div-seat {
    @include wh(100%, 0.5rem);
  }

  .chatting-wrap {
    //min-height: 100vh;
    min-height: calc(100vh - 0.5rem);
    padding: 0.15rem 0.16rem 0.6rem;
    background: #ececec;

    .chatting-item {
      @include flex(flex-start);
      width: 100%;
      margin: 0 0 0.16rem 0;

      .chat-txt {
        max-width: 75%;
        padding: 0.1rem 0.14rem;
        background: #fff;
        margin: 0 0 0 0.12rem;
        border: 1px solid #eee;
        border-radius: 0.04rem;
        position: relative;
        // 三角
        &:after {
          content: "";
          display: inline-block;
          border: 0.1rem solid transparent;
          border-right-color: #fff;
          position: absolute;
          left: calc(-0.2rem + 1px);
          top: 50%;
          transform: translateY(-50%);
        }
      }

      .mine-avatar, .contacts-avatar {
        border-radius: 0.04rem;
      }

      &.chat-mine {
        @include flex(flex-end);

        .chat-txt {
          margin: 0 0.12rem 0 0;
          background: #23e921;

          &:after {
            border: 0.1rem solid transparent;
            border-left-color: #23e921;
            left: calc(100% - 1px);
          }
        }
      }
    }
  }

  .form-wrap {
    @include flex(space-between);
    @include wh(100%, 0.6rem);
    position: fixed;
    left: 0;
    bottom: 0;
    background: #f4f4f4;
    padding: 0 0.16rem;

    .send-input {
      @include wh(82%, 0.34rem);
      font-size: 0.15rem;
      text-indent: 0.08rem;
    }

    .send-btn {
      @include wh(0.5rem, 0.34rem);
      line-height: 0.34rem;
      background: $color-primary;
      @include font(0.13rem, #fff, center);
      border-radius: 0.02rem;
      user-select: none;

      &:active {
        background: $color-primary-active;
      }
    }
  }

}

